<template>
  <div class="play-page">
    <PlayPageHeader
      @hide-play-page="$emit('hide-play-page')"
      :currentSong="currentSong"
    />
    <PlayPageDisc
      v-if="showDisc"
      :currentSong="currentSong"
      :playing="playing"
      @click.native="showDisc = false"
    />
    <PlayPageLyric
      v-else
      :currentSong="currentSong"
      :currentTime="currentTime"
    />
    <PlayPageFooter
      :playing="playing"
      :currentTime="currentTime"
      :duration="duration"
      @update:currentTime="$emit('update:currentTime', $event)"
      @audio-play-handler="$emit('audio-play-handler')"
      @audio-pause-handler="$emit('audio-pause-handler')"
      @prev-song="$emit('prev-song')"
      @next-song="$emit('next-song')"
    />
  </div>
</template>

<script>
import PlayPageHeader from "@/components/PlayPageHeader.vue";
import PlayPageDisc from "@/components/PlayPageDisc.vue";
import PlayPageLyric from "@/components/PlayPageLyric.vue";
import PlayPageFooter from "@/components/PlayPageFooter.vue";

export default {
  props: {
    currentSong: [Object, null],
    playing: Boolean,
    currentTime: Number,
    duration: Number,
    currentPLayList: Array,
  },
  components: {
    PlayPageHeader,
    PlayPageDisc,
    PlayPageLyric,
    PlayPageFooter,
  },
  data: function () {
    return {
      showDisc: true,
    };
  },

};
</script>

<style lang="less">
.play-page {
  width: 100vw;
  height: 100vh;
  background: rgb(168, 168, 168);
  padding: 15px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .play-page-disc {
    flex: 1;
  }
  .play-page-luric {
    flex: 1;
  }
}
</style>